<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <el-input
          v-model="query.inventoryNo"
          placeholder="盘点单号"
          size='small'
          class="filter-item"
          style="width: 100px"
        />
        <el-date-picker
          v-model="defaultDate"
          :default-time="['00:00:00','23:59:59']"
          type="daterange"
          range-separator=":"
          size="small"
          class="date-item"
          value-format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="开始时间"
          end-placeholder="结束日期"
          @change="onChangeTime"
        />
        <el-input
          v-model="query.inventoryName"
          placeholder="盘点人"
          size='small'
          class="filter-item"
          style="width: 100px"
        />
        <rrOperation :crud="crud" @resetQuery="onResetQuery"/>
      </div>
      <crudOperation>
        <el-button
          v-permission="['admin', 'inventory:import']"
          slot="left"
          class="filter-item"
          type="primary"
          icon="el-icon-add"
          size="mini"
          @click="showDialog=true"
        >
        导入盘点数据
        </el-button>
      </crudOperation>
    </div>
    <!--表格渲染-->
    <el-table
      ref="table"
      v-loading="crud.loading" 
      :data="crud.data"
      @selection-change="crud.selectionChangeHandler"
      @sort-change="crud.sortChange"
    >
      <el-table-column v-if="columns.visible('inventoryNo')" label="盘点单号" prop="inventoryNo"></el-table-column>
      <el-table-column v-if="columns.visible('createTime')" label="生成时间" prop="createTime"></el-table-column>
      <el-table-column v-if="columns.visible('createUserName')" label="盘点人" prop="createUserName"></el-table-column>
      <el-table-column v-if="columns.visible('profitLossNum')" label="盈亏数量" prop="profitLossNum" sortable="custom">
        <template v-slot="slot">
          <span style="color: rgb(255, 132, 50);">{{slot.row.profitLossNum}}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="columns.visible('profitLossPrincipal')" label="盈亏成本金额(元)" prop="profitLossPrincipal">
        <template slot-scope="scope">{{ formatMoney(scope.row.profitLossPrincipal, 2) }}</template>
      </el-table-column>
      <el-table-column v-if="columns.visible('profitLossSales')" label="盈亏零售金额(元)" prop="profitLossSales">
        <template slot-scope="scope">{{ formatMoney(scope.row.profitLossSales, 2) }}</template>
      </el-table-column>
      <el-table-column v-if="columns.visible('status')" label="状态" prop="status">
        <template slot-scope="{row}">
          <template v-if="row.status === 0">待审核</template>
          <template v-if="row.status === 1">已完成</template>
          <template v-if="row.status === 2">已取消</template>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="{row}">
          <template v-if="row.status === 0">
            <el-button
              v-permission="['admin', 'inventory:examine']"
              @click="onShowDetail(row.id)"
              type="text"
            >编辑</el-button>
            <el-button
              v-permission="['admin', 'inventory:cancel']"
              @click="onCancel(row)"
              type="text"
            >取消</el-button>
          </template>
          <template v-else>
            <el-button
              v-permission="['admin', 'inventory:detail']"
              @click="onShowDetail(row.id)"
              type="text"
            >详情</el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <pagination />
    <!-- 弹窗 -->
    <el-dialog
      width="600px"
      append-to-body
      title="导入盘点数据"
      :close-on-click-modal="false"
      :visible.sync="showDialog"
    >
      <importInventory @cancel="showDialog=false" @success="onImportSuccess"></importInventory>
    </el-dialog>
    <el-dialog
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      :visible.sync="showDetail"
      title="盘点单详情"
      append-to-body
      width="75%"
    >
      <inventoryDetail
        @success="onSuccess"
        v-if="showDetail"
        :id="inventoryId"
      >
      </inventoryDetail>
    </el-dialog>
  </div>
</template>

<script>
import { examine } from '@/api/storageRoom/drugInventory';
import importInventory from './module/importInventory';
import CRUD, { presenter, header } from '@crud/crud';
import rrOperation from '@crud/RR.operation';
import crudOperation from '@crud/CRUD.operation';
import pagination from '@crud/Pagination';
import inventoryDetail from './module/detail';
import { formatMoney } from "@/utils/index";

let defaultCrud = CRUD({
  title: '盘点',
  url: 'drugInventory/getList',
  method: 'post',
  sort: ['id,desc','profit_loss_num,desc'],
  query: {inventoryNo: null, inventoryName: null, startTime: null, endTime: null}
});

export default {
  name: "drugInventory",
  components: { crudOperation, rrOperation, pagination, importInventory, inventoryDetail},
  mixins: [presenter(defaultCrud), header()],
  data() {
    return {
      showDialog: false,
      defaultDate: null,
      showDetail: false,
      inventoryId: null
    }
  },
  mounted() {
    if(this.query.startTime && this.query.endTime) {
      this.defaultDate = [
        this.query.startTime,
        this.query.endTime
      ]
    }
  },
  methods: {
    formatMoney,
    onChangeTime() {
      if(this.defaultDate && this.defaultDate.length) {
        this.query.startTime = this.defaultDate[0];
        this.query.endTime = this.defaultDate[1];
      } else {
        this.query.startTime = null;
        this.query.endTime = null;
      }
      this.crud.toQuery();
    },
    onImportSuccess() {
      this.showDialog = false;
      this.crud.toQuery();
    },
    onShowDetail(id) {
      this.inventoryId = id;
      this.showDetail = true;
    },
    onResetQuery() {
      this.defaultDate = null;
    },
    onCancel(row) {
      this.$confirm('确认取消本次盘点？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let data = {
          id: row.id,
          status: 2,
        };
        examine(data).then(() => {
          this.onSuccess(true);
        })
      });
    },
    onSuccess(isClose) {
      if(isClose) {
        this.showDetail = false;
          this.$notify({
          title: "操作成功",
          type: "success"
        });
      }
      this.crud.refresh();
    }
  }
}
</script>